<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">

		<!-- !Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>09_JavaScript_事件2</title>
		<meta name="description" content="">
		<meta name="author" content="chenyong">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		
		<style type="text/css">
			
			
			body{
				margin:50px;
			}
			
			div{
				font-size:12px;
			}
			
			div.box{
				margin-top:30px;
			}
			
			ul{
				width:200px;
			}
		
			
		</style>
		
		<script type="text/javascript">
			
			 function fn1(item){
					alert(item.innerHTML);
				}
				
			window.onload = function(){
				
				var btn = document.getElementById('btn');
				
				//为button绑定事件
				btn.onclick = function(){
					alert(event.type);
					alert(this.innerHTML);
				};
				
				
				var li = document.getElementsByTagName('li');
				
				for(i=0;i<li.length;i++){
					li[i].onmouseover = function(){
						this.style.color = '#fff';
						this.style.backgroundColor = '#099';
						this.style.fontWeight = 'bolder';
					};
					li[i].onmouseout = function(){
						this.style.color = '#000';
						this.style.backgroundColor = '#fff';
						this.style.fontWeight = 'normal';
					};
				}
			};
		</script>
	</head>
	
	<body>
		
		<h3>09_JavaScript_事件2</h3>
		
		<div class="box" >
			<p><b>事件解耦</b></p>
			<p>开发过程中不应该在标签中添加事件，而应该JS中绑定</p>
			<p>绑定代码应该在页面加载完毕后的onload方法中执行</p>
			<button id="btn">点击一下</button>
		</div>
		
		
		<p><b>示例：为li绑定onmouseover和onmouseout事件</b></p>
		<ul>
			<li>aaaaaaaaaaaaaaa</li>
			<li>bbbbbbbbbbbbbbb</li>
			<li>ccccccccccccccc</li>
			<li>ddddddddddddddd</li>
			<li>eeeeeeeeeeeeeee</li>
			<li>fffffffffffffff</li>
		</ul>
	
	</body>
	
</html>